<template>

  <el-card class="info-card" style="width:auto">

    <template #header>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        修改邮箱
      </div>
    </template>
    <template #default style="display: flex;flex-direction: column;justify-content: center; align-items: center;">

      <div>


        <div v-if="changePwdStep === 1">
          <!-- 输入框：密码 -->
          <el-input size="large" v-model="form.password" placeholder="输入密码进行校验" type="password" maxlength="30"
            class='security-input' style="margin-bottom: 20px; width:100%;max-width: 400px">
            <template #prepend>
              <el-icon>
                <Lock />
              </el-icon>
            </template>
            <template #append>
              <el-button type="primary" @click="verifyPassword" size="large">
                下一步
              </el-button>
            </template>
          </el-input>
        </div>

        <div v-if="changePwdStep === 2">
          <!-- 邮箱验证码输入框 -->
          <div>
            <el-input size="large" v-model="form.email" placeholder="请输入新邮箱" type="email" maxlength="50"
              class='security-input'>
              <template #prepend>
                <el-icon>
                  <Message />
                </el-icon>
              </template>


            </el-input>

          </div>
          <div>
            <el-input size="large" v-model="form.sms" placeholder="请输入验证码" type="text" maxlength="6"
              class='security-input'>
              <template #prepend>
                <el-icon>
                  <CircleCheck />
                </el-icon>
              </template><template #append>
                <!-- 按钮：获取验证码按钮 -->
                <el-button type="primary" @click="sendVerificationCode2" size="large">
                  {{ timer2 > 0 ? timer2 + ' 秒后重新发送' : '发送验证码' }}
                </el-button>
              </template>
            </el-input>
          </div>
          <div>
            <el-button @click="handleSubmit">提交</el-button>
          </div>
        </div>
      </div>
    </template>
  </el-card>


</template>


<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { getStudentInfoApi } from "@/api/student"
import { verifyPasswordApi, changeEmailApi } from "@/api/user"

import { send_email_codeApi } from '@/api/user';
import { validateEmail, } from "@/utils/regex";
import { Lock, Message, CircleCheck } from "@element-plus/icons-vue"



const store = useStore()
const timer2 = ref(0);

const changePwdStep = ref(1);


const form = reactive({
  is_teacher: store.state.user.is_teacher,
  password: '',
  user_id: store.state.user.user_id,
  phone_numbers: '',
  email: '',
  sms: '',
  email_type: 'change_email',
})


const verifyPassword = () => {
  verifyPasswordApi(form).then((response: any) => {
    if (response.data === false) {
      ElMessage.error('密码错误');
      return;
    }
    changePwdStep.value = 2;
  })
}
const handleSubmit = () => {
  changeEmailApi(form).then((response: any) => {
    if (response.code === 200) {
      ElMessage.success('修改邮箱成功');
      form.password = '';
      form.email = '';
      form.sms = '';
    } else {
      ElMessage.error('服务器错误，修改邮箱失败');
    }
  })
}
const sendVerificationCode2 = () => {
  let sendFlag = ref(true);
  console.log("validateEmail(form.email) = ", validateEmail(form.email))
  // 校验邮箱格式是否正确
  if (!validateEmail(form.email)) {
    console.log("邮箱格式错误")
    ElMessage.error('请输入正确的邮箱');
    sendFlag.value = false;
    return;
  }
  // 判断邮箱是否和当前邮箱相同
  getStudentInfoApi({ user_id: store.state.user.user_id }).then((response: any) => {
    console.log("response.data = ", response.data)
    if (response.data.email !== form.email) {
      console.log("更改邮箱，邮箱输入正确")
      if (timer2.value === 0) {
        timer2.value = 60;
        send_email_codeApi(form);
        const interval = setInterval(() => {
          timer2.value--;
          if (timer2.value === 0) {
            clearInterval(interval);
          }
        }, 1000);
      }

    } else {

      console.log('您输入的邮箱与原邮箱相同')
      ElMessage.error('您输入的邮箱与原邮箱相同');

    }
  }).catch((error) => {
    console.error('验证失败:', error);
    ElMessage.error('验证失败');
  });



}


</script>

<style lang="scss" scoped>
.security-input {
  margin-bottom: 20px;
  width: 100%;
  max-width: 400px
}
</style>